<template>
  <a-card :bordered="false">
    <a-tabs v-model="activedTab" @change="tabChange">
      <a-tab-pane v-for="tab in warehouseTabData" :key="tab.key" :tab="tab.text"></a-tab-pane>
    </a-tabs>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="仓库名称">
              <a-input placeholder="请输入仓库名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="所属国家">
              <j-search-select-tag
                placeholder="请选择所属国家"
                v-model="queryParam.country"
                dict="hz_logistics_country_default,cn_name,code,logistics"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="仓库代码">
              <a-input placeholder="请输入仓库代码" v-model="queryParam.code"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" v-has="'warehouse:add'" type="primary">创建仓库</a-button>
      <a-button type="primary" v-has="'warehouse:enable'" @click="changeEnable('Y', selectionRows, 1)"
        >批量启用</a-button
      >
      <a-button type="danger" v-has="'warehouse:enable'" @click="changeEnable('N', selectionRows, 1)"
        >批量禁用</a-button
      >
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('平台仓模板下载',url.downloadPlatformTemplate)">下载模板</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入平台仓</a-button>
      </a-upload> -->
      <a-button v-has="'warehouse:import'" @click="handleImport" type="primary">平台仓导入</a-button>
      <!-- 高级查询区域 -->
      <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query> -->
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :customRow="selectRowData"
      >
        <!-- 仓库属性 -->
        <template slot="typeSlot" slot-scope="text, record">
          <div
            class="icon_type"
            v-if="record.type"
            :style="{ backgroundColor: record.type === '1' ? '#0CC3DD' : '#000' }"
          >
            <a-icon type="home" />
          </div>
          {{ text }}
        </template>
        <!-- 所属国家 -->
        <template slot="countrySlot" slot-scope="text, record">
          <div class="flag_icon">
            <div>
              <svg class="icon" aria-hidden="true" style="font-size: 100px">
                <use :xlink:href="`#icon-${record.country}`" />
              </svg>
            </div>
            <div>{{ text }}</div>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">
          <a v-has="'warehouse:edit'" @click="handleEdit(record)">编辑</a>
          <a-divider v-has="'warehouse:edit'" type="vertical" />
          <a v-has="'warehouse:enable'" v-if="record.status === 'N'" @click="changeEnable('Y', record, 2)">启用</a>
          <!-- 启用状态可以禁用 -->
          <a
            v-has="'warehouse:enable'"
            v-if="record.status === 'Y'"
            style="color: red"
            @click="changeEnable('N', record, 2)"
            >禁用</a
          >
          <a-divider v-has="'warehouse:enable'" type="vertical" />
          <j-operate-log ref="operateRef">
            <a slot="title" @click="$refs.operateRef.searchOperateLog(record.id)">日志</a>
          </j-operate-log>
        </span>

        <!-- 时间 -->
        <template slot="timeSlot" slot-scope="text, record">
          <div class="templateSlot">
            <div v-if="record.updateTime">
              <span>更新：</span>
              <span>{{ record.updateTime }}</span>
              &nbsp;
              <span>{{ record.updateBy }}</span>
            </div>
            <div v-if="record.createTime" style="color: #959393">
              <span>创建：</span>
              <span>{{ record.createTime }}</span>
              &nbsp;
              <span>{{ record.createBy }}</span>
            </div>
          </div>
        </template>
        <!-- 备注 -->
        <template slot="remarkSlot" slot-scope="text, recoed">
          <j-ellipsis :value="text" width="200px"></j-ellipsis>
        </template>
      </a-table>
    </div>

    <warehouse-modal ref="modalForm" :type="activedTab" @ok="modalFormOk"></warehouse-modal>
    <warehouse-import-modal ref="importModalForm" @ok="modalFormOk"></warehouse-import-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import WarehouseModal from './modules/WarehouseModal'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { postFormAction } from '@api/manage'
import WarehouseImportModal from './modules/WarehouseImportModal'
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_4901569_idskcwlijv.js',
})
export default {
  name: 'WarehouseList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    WarehouseModal,
    IconFont,
    WarehouseImportModal,
  },
  data() {
    return {
      description: '仓库管理信息管理页面',
      queryParam: {
        type: '', //仓库属性
      },
      activedTab: '',
      warehouseTabData: [
        //仓库平台
        { key: '', text: '全部' },
        { key: '1', text: '系统仓' },
        { key: '2', text: '平台仓' },
      ],
      // 表头
      columns: [
        {
          title: 'NO',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '仓库属性',
          align: 'center',
          dataIndex: 'type_dictText',
          scopedSlots: { customRender: 'typeSlot' },
        },
        {
          title: '仓库名称',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '仓库代码',
          align: 'center',
          dataIndex: 'code',
        },
        {
          width: 250,
          title: '所属国家',
          align: 'center',
          dataIndex: 'country_dictText',
          scopedSlots: { customRender: 'countrySlot' },
        },
        {
          title: '仓库状态',
          align: 'center',
          dataIndex: 'status_dictText',
          customCell: (record, index) => {
            if (record.status === 'Y') {
              return { style: { color: '#1890FF' } }
            } else {
              return { style: { color: '#FF0000' } }
            }
          },
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'effectTime',
          scopedSlots: { customRender: 'timeSlot' },
        },
        {
          width: 200,
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remarkSlot' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/wms/warehouse/list',
        delete: '/wms/warehouse/delete',
        deleteBatch: '/wms/warehouse/deleteBatch',
        exportXlsUrl: '/wms/warehouse/exportXls',
        importExcelUrl: 'wms/warehouse/importPlatform',
        downloadPlatformTemplate: 'wms/warehouse/downloadPlatformTemplate',
      },
      dictOptions: {},
      superFieldList: [],
    }
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    initDictConfig() {},
    selectRowData(record, index) {
      const that = this
      return {
        on: {
          dblclick: () => {
            this.handleDetail(record)
          },
        },
      }
    },
    //切换标签页
    tabChange(value) {
      this.queryParam.type = value
      this.loadData(1)
    },
    //重置
    searchReset() {
      this.queryParam = {
        type: this.activedTab,
      }
      this.loadData(1)
    },
    //平台仓导入
    handleImport() {
      this.$refs.importModalForm.add()
      this.$refs.importModalForm.disableSubmit = false
    },
    //操作日志
    optionLogHandle() {
      this.$refs.operateRef.searchOperateLog()
    },
    //操作启用禁用
    changeEnable(checked, records, type) {
      const that = this
      if (!records || Object.keys(records).length === 0) {
        this.$message.warning('请选择数据!')
        return
      }

      let codes = ''
      if (type === 1) {
        //批量操作
        codes = records.map((item) => item.id).join(',')
      } else if (type === 2) {
        //单个操作
        codes = records.id
      }

      if (checked === 'N') {
        that.$confirm({
          title: '确定要禁用所选仓库？',
          content: (
            <div>
              <div style="color: red">禁用后将导致仓库无法被用于业务</div>
              <div style="color: #999999">你还要继续吗？</div>
            </div>
          ),
          okText: '继 续',
          onOk() {
            that.handlePost(checked, codes)
          },
          onCancel() {},
        })
      } else {
        that.handlePost(checked, codes)
      }
    },
    handlePost(checked, record) {
      postFormAction('/wms/warehouse/changeEnable/', { isEnable: checked, ids: record }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
          this.onClearSelected()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'name', text: '仓库名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'type', text: '仓库属性', dictCode: 'wms_warehouse_type' })
      fieldList.push({ type: 'string', value: 'code', text: '仓库代码', dictCode: '' })
      fieldList.push({
        type: 'sel_search',
        value: 'country',
        text: '所属国家',
        dictTable: 'hz_logistics_country_default',
        dictText: 'cn_name',
        dictCode: 'code',
      })
      fieldList.push({ type: 'string', value: 'status', text: '仓库状态', dictCode: 'is_enable' })
      fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
      fieldList.push({ type: 'string', value: 'contacts', text: '联系人', dictCode: '' })
      fieldList.push({ type: 'string', value: 'phone', text: '联系电话', dictCode: '' })
      fieldList.push({ type: 'string', value: 'zipCode', text: '邮编', dictCode: '' })
      fieldList.push({ type: 'string', value: 'address', text: '仓库地址', dictCode: '' })
      this.superFieldList = fieldList
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

/deep/.ant-card-body {
  padding: 5px 24px;
}

.table-page-search-wrapper {
  margin: 30px 0 0px 0;
}
.icon_type {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  // align-items: center;
  // justify-content: center;
  text-align: center;
  line-height: 22px;
  margin-right: 5px;
  font-size: 14px;
}
.flag_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  
  div:nth-child(1){
    width: 70px;
    text-align: right;
  }
  div:nth-child(2){
    width: 100px;
    text-align: left;
  }
  svg:not(:root) {
    overflow: hidden;
    width: 26px;
    height: 26px;
    margin-right: 6px;
  }
}
</style>